<template>
  <div class="todoBox">
    <Header :pageType="pageType" @getPageType="getPageType"> </Header>
    <myTodo :pageType="pageType" v-if="pageType === 'myTodo'"> </myTodo>
    <newTodo @setPageType="setPageType" v-else></newTodo>
  </div>
</template>

<script lang="ts">
import Header from "./components/Header.vue";
import myTodo from "./components/myTodo.vue";
import newTodo from "./components/newTodo.vue";

import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "todoIndex",
  components: { Header, myTodo, newTodo },
  setup() {
    const state = reactive({
      pageType: "myTodo"
    });

    // 获取当前页面类型
    function getPageType(val: string) {
      if (!val) return;
      state.pageType = val;
    }

    function setPageType(val: string) {
      state.pageType = val;
    }

    return {
      ...toRefs(state),
      getPageType,
      setPageType
    };
  }
});
</script>

<style lang="scss" scoped>
.todoBox {
  height: 100vh;
  background: #f5f5f5;
}
</style>
